<template>
  <div style="width: 100%;height: 100%">
    <div class="main-tab">
      <x-header id="header" slot="header" :left-options="{showBack: false}" >
        <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
        <span slot="default" class="header-tit">发布需求</span>
      </x-header>
      <div class="main-headerAndTab">
        <group gutter="0">
          <x-textarea max="200" placeholder="请输入您的采购需求....." height="200" :show-counter="false" v-model="content"></x-textarea>
        </group>
        <group>
          <popup-picker :data="list1" v-model="value1"  :columns="1" placeholder="请选择需求" show-name>
            <span slot="title" class="tit">采购需求</span>
          </popup-picker>
          <x-address @on-hide="logHide" @on-show="logShow"  v-model="value" :list="addressData" @on-shadow-change="onShadowChange" placeholder="请选择地址" :show.sync="showAddress">
            <span slot="title" class="tit">收货地址</span>
          </x-address>
          <x-input placeholder="请填写您的预算" placeholder-align="right" text-align="right" v-model="budget">
            <span slot="label" class="tit">采购预算</span>
          </x-input>
        </group>
        <group>
          <div class="box">
            <div class="invoice">
              <span>发票需求</span>
            </div>
            <checker v-model="demo1" radio-required default-item-class="demo1-item" selected-item-class="demo1-item-selected" class="choose">
              <checker-item :value="item" v-for="(item, index) in items1" :key="index">{{item.value}}</checker-item>
            </checker>
          </div>
        </group>
        <group>
          <x-input placeholder="请输入手机号码" placeholder-align="right" text-align="right" v-model="mobile" is-type="china-mobile">
            <span slot="label" class="tit">手机号码</span>
          </x-input>
        </group>
        <div class="main-bottom">
          <x-button class="rel-button" @click.native="addUserDemand"><span>确认发布</span></x-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { XTextarea, PopupPicker, Picker,XAddress,ChinaAddressV4Data,Checker, CheckerItem,cookie } from 'vux'
  import { getDemandCategory,addUserDemand } from '@/api/need'
    export default {
        name: "demand",
      methods:{
        onChange (val) {
          console.log('val change', val)
        },
        onShow () {
          console.log('on show')
        },
        onHide (type) {
          console.log('on hide', type)
        },
        back(){
          this.$router.go(-1)
        },
        onShadowChange (ids, names) {
          console.log(ids, names)
        },
        logHide (str) {
          console.log('on-hide', str)
        },
        logShow (str) {
          console.log('on-show')
        },
        getDemandCategory(){
          getDemandCategory({}).then(res =>{
            let arr=res;
            console.log(arr)
            for (var i in arr){
              let id=String(arr[i]['id']);
              this.list1.push({
                name:arr[i]['name'],
                value: id
              })
            }
            console.log(this.list1)
          })
        },
        getAddressName(){
          console.log(this.addressData)
        },
        addUserDemand(){
          this.cid=JSON.parse(cookie.get('userInfo')).id;
          console.log(this.value1[0])
          var cateId=this.value1[0];
          this.demandCategoryId=(parseInt(cateId));
          console.log(this.demandCategoryId)
          let arr2=this.addressData;
          for (var i in arr2){
            if (this.value[0] === arr2[i]['value']){
              this.province=arr2[i]['name']
            }
            if (this.value[1] === arr2[i]['value']){
              this.city=arr2[i]['name']
            }
          }
            this.invoiceType=parseInt(this.demo1.key)
          addUserDemand({
            cid:this.cid,
            demandCategoryId:this.demandCategoryId,
            content:this.content,
            budget:this.budget,
            province:this.province,
            city:this.city,
            mobile:this.mobile,
            invoiceType:this.invoiceType
          }).then(res =>{
            console.log(res)
            this.$vux.toast.show({
              text:'发布成功',
              type:'success'
            })
            this.$router.push({
              name:'service'
            })
          })
        },
      },
      data(){
        return{
          list1:[],
          value1:[],
          addressData: ChinaAddressV4Data,
          value: [],
          showAddress: false,
          demo1: null,
          content:'',
          cid:'',
          budget: '',
          province:'',
          city:'',
          mobile:'',
          demandCategoryId:'',
          invoiceType:'',
          items1: [{
            key: '1',
            value: '不用发票'
          }, {
            key: '2',
            value: '增值税普通发票'
          }, {
            key: '3',
            value: '增值税专用发票'
          }],
        }
      },
      components: {
        XTextarea,
        PopupPicker,
        Picker,
        XAddress,
        Checker,
        CheckerItem
      },
      created(){
          this.getDemandCategory();
          this.getAddressName();
      },
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .tit{
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
  }
  .box {
    padding-left: 1.07rem;
  }
  .demo1-item {
    border: 1px solid #CCCCCC;
    padding: 5px 10px;
    font-size: 14px;
    color: #4A4A4A;
    /*letter-spacing: -0.34px;*/
    text-align: justify;
    margin-right: 0.93rem;
  }
  .demo1-item-selected {
    border: 1px solid #AD2532;
    background: rgba(173,37,50,0.15);
  }
  .choose{
    display: flex;
    /*flex-direction: row;*/
    padding-bottom:1.08rem ;
  }
  .invoice{
    margin-top: 0.71rem;
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
    padding-bottom: 0.71rem;
  }
  .main-bottom{
    width: 100%;
    height: 9%;
    position: fixed;
    bottom: 0;
    left:0;
  }
  .rel-button{
    width: 24.64rem;
    height: 3.21rem;
    margin-top: 0.79rem;
    margin-left: 1.07rem;
    background: #AD2532;
    border-radius: 1.61rem;
  }
  .rel-button span{
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
  }
</style>
